<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="750" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Parameters ---
        const l = 180; // Length of a rod and the gap in pixels
        const startX = (canvas.width - 3 * l) / 2; // Center the diagram
        const rodY = 120; // Vertical position of the rods' centerline
        const rodHeight = 14;
        const dimLineY = rodY + 80; // Y position for the dimension lines
        const arrowSize = 10;
        const tickStartY = rodY + rodHeight / 2;

        // --- Style settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // --- Drawing Functions ---

        /**
         * Draws a dimension line with extension lines, arrows, and a label.
         * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
         * @param {number} x1 - The starting x-coordinate.
         * @param {number} x2 - The ending x-coordinate.
         * @param {number} y - The y-coordinate of the dimension line.
         * @param {string} label - The text label for the dimension.
         */
        function drawDimension(ctx, x1, x2, y, label) {
            ctx.save();
            ctx.lineWidth = 1;

            // Extension lines (from object to dimension line)
            ctx.beginPath();
            ctx.moveTo(x1, tickStartY);
            ctx.lineTo(x1, y);
            ctx.moveTo(x2, tickStartY);
            ctx.lineTo(x2, y);
            ctx.stroke();

            // Horizontal dimension line with arrowheads
            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);

            // Left arrowhead: <
            ctx.moveTo(x1 + arrowSize, y - arrowSize / 2);
            ctx.lineTo(x1, y);
            ctx.lineTo(x1 + arrowSize, y + arrowSize / 2);

            // Right arrowhead: >
            ctx.moveTo(x2 - arrowSize, y - arrowSize / 2);
            ctx.lineTo(x2, y);
            ctx.lineTo(x2 - arrowSize, y + arrowSize / 2);

            ctx.stroke();

            // Label
            ctx.font = 'italic 22px "Times New Roman"';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText(label, (x1 + x2) / 2, y - 8);
            ctx.restore();
        }

        // --- Main Drawing ---

        // 1. Draw the two rods
        ctx.lineWidth = 2;
        // Rod 1
        ctx.strokeRect(startX, rodY - rodHeight / 2, l, rodHeight);
        // Rod 2
        ctx.strokeRect(startX + 2 * l, rodY - rodHeight / 2, l, rodHeight);

        // 2. Draw the charge density labels (λ)
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        // Label for Rod 1
        ctx.fillText('λ', startX + l / 2, rodY - rodHeight / 2 - 10);
        // Label for Rod 2
        ctx.fillText('λ', startX + 2 * l + l / 2, rodY - rodHeight / 2 - 10);
        
        // 3. Draw the small dot on the left
        ctx.beginPath();
        ctx.arc(startX - l / 3, rodY, 2.5, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Draw the dimension lines
        // Dimension for Rod 1
        drawDimension(ctx, startX, startX + l, dimLineY, 'l');
        // Dimension for the gap
        drawDimension(ctx, startX + l, startX + 2 * l, dimLineY, 'l');
        // Dimension for Rod 2
        drawDimension(ctx, startX + 2 * l, startX + 3 * l, dimLineY, 'l');

        // 5. Draw the caption
        ctx.font = '20px "SimSun", "Songti SC", sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 7-39 图', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>